<template>
	<view class="content">
		<view class="search" style="">
			<uni-search-bar class="uni-mt-10" radius="20" clearButton="auto" cancelButton="none" @confirm="search" />
		</view>
		<view class="left" style="">
			<scroll-view class="left-scrolle-view" scroll-y="true" @scrolltolower="" lower-threshold="10">
				<view v-for="(list,index) in cateList" :key="list.id" class="cate-root-list"
					:class="{active:isActive===index}" v-on:click="changeOver(index,list.id)">
					{{list.name}}
				</view>
			</scroll-view>
		</view>

		<view class="right" style="">
			<scroll-view class="right-scrolle-view" scroll-y="true" @scrolltolower="" lower-threshold="10">
				<view v-for="(item,index1) in secondList" :key="item.id" v-if="item.parentId === selectCategoryId">
					<uni-section v-if="thirdList.length > 0" :title="item.name" type="line">
						<uni-grid :column="3" :showBorder="false">
							<uni-grid-item v-for="(goods,index2) in thirdList" :key="goods.id" v-if="item.id==goods.parentId">								
								<view class="grid-item-box" style="background-color: #fff;">
									<image :src="goods.imageUrl" style="width: 50px;height: 50px;"></image><br />
									<text class="text">{{goods.name}}</text>
								</view>
							</uni-grid-item>
						</uni-grid>
					</uni-section>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import jpa from '../../jpa/jpa.js';
	
	import { goodsList , childrenId } from '../../jpa/category.js';
	
	export default {
		data() {
			return {
				cateList: [],
				secondList: [],
				thirdList: [],
				isActive: 0,
				pid: 1,
				selectCategoryId: 0
			};
		},

		onLoad() {

			this.goods();

		},

		methods: {
			goods() {

				let that = this;
				goodsList().then(data=>{
					console.log(that.getcategorylist(data))
							
					data.forEach((item, index) => {
							
						if (item.parentId == 0) {
							
							if (index == 0) {
								that.selectCategoryId = item.id;
							}
							
							that.cateList = [...that.cateList,item];
							
						}
					})
					that.getChildrenId(that.selectCategoryId);
				})
			},

			getChildrenId(parentId) {

				let that = this;

				childrenId(parentId).then(data=>{
					that.secondList = data.secondList;
					that.thirdList = data.tireList;
				})
			},

			getcategorylist(item) {

				for (var i = 0; i < item.length; i++) {

					let id = item[i].id;

					if (!item[i].children) {

						item[i].children = [];

					}

					for (var j = 0; j < item.length; j++) {

						if (id == item[j].parentId) {

							item[i].children.push(item[j]);

						}

					}

				}

				return item;

			},



			changeOver(index, catId) {

				this.selectCategoryId = catId;

				this.isActive = index;
				
				console.log(catId)
				
				console.log(this.selectCategoryId)

				this.getChildrenId(this.selectCategoryId);

			}

		}

	}
</script>

<style>
	.content {
		/* border: 1px solid red; */
		height: 100vh;
	}

	.search {
		/* border: 1px solid black; */
		position: fixed;
		z-index: 9999;
		width: 100vw;
		height: 40px;
	}

	.uni-mt-10 {
		margin-top: -10px;
	}

	.left {
		/* position: fixed; */
		float: left;
		width: 19vw;
		height: 100vh;
	}

	.right {
		float: right;
		width: 79vw;
		height: 100vh;
	}

	.left,
	.right {
		margin-top: 42px;
	}

	.left-scrolle-view {
		height: 95vh;
	}

	.right-scrolle-view {
		height: 95vh;
	}

	/* 没激活的样式 */
	.cate-root-list {
		/* border: 1px solid red; */
		height: 40px;
		place-content: center;
		display: grid;
		background-color: #f8f8f8;
	}

	/* 激活时的样式 */
	.cate-root-list.active {
		color: red;
		/* 举例：改变文字颜色 */
		background-color: #fff;
	}

	.grid-item-box {
		place-content: center;
		display: grid;
	}
</style>